<template>
  <!--原始手机号码获取短信验证码 弹出框-->
  <uni-popup ref="getSmsCode">
    <uni-popup-dialog
        type="info"
        cancelText="取消"
        confirmText="确认"
        title="验证身份"
        @close="cancel"
        @confirm="submitForm"
        before-close>
      <template v-slot="content">
        <view style="font-size: 26rpx;"> 验证码将发送至手机：<span>{{ user.mobileHide }}</span></view>
        <uni-forms
            ref="form"
            :modelValue="form"
            :rules="rules"
            :label-width="0" type="line" label-align="right"
            class="paddingAll">
          <uni-forms-item label="" name="smsCode" required>
            <view class="smscode_flex">
              <uni-easyinput placeholder="请输入短信验证码" type="number" maxlength="6" v-model="form.smsCode"></uni-easyinput>
              <button class="code_btn" :loading="getSmsLoading" @click="getMobileSmsCode(null)" v-if="showCode">
                {{ counter }}
              </button>
              <button class="code_graybtn" v-else>{{ counter }}</button>
            </view>
          </uni-forms-item>
          <view class="sounds-text" v-show="voiceShow" @click="getMobileSmsCode(100)">收不到短信？获取语音验证码</view>
        </uni-forms>
      </template>
    </uni-popup-dialog>
  </uni-popup>
</template>
<script>

import {checkSmsCode, toGetSmsCode} from "@/api/ec/person/user/userInfo";

export default {
  props: {},
  data() {
    return {
      // 验证码按钮显示
      showCode: true,
      // 获取验证码文字
      counter: '获取验证码',
      // 短信验证码按钮获取加载中
      getSmsLoading: false,
      // 获取语音验证码是否显示
      voiceShow: false,

      // 用户信息
      user: {},
      // 短信验证码类型
      smsType: null,
      // 短信验证码
      form: {
        smsCode: null,
      },
      // 短信验证码校验
      rules: {
        smsCode: {
          rules: [
            {required: true, errorMessage: '请输入6位数字短信验证码'},
            {pattern: /^[0-9]*$/, message: '请输入6位数字短信验证码'}
          ]
        },
      },
    };
  },
  methods: {
    /** 打开弹出框 */
    toOpenDialog(user, smsType) {
      this.user = user;
      this.form = {smsCode: null,};
      this.smsType = smsType;
      this.$refs.getSmsCode.open('center')
    },
    /** 取消按钮 */
    cancel() {
      this.$refs.getSmsCode.close()
    },
    /** 获取短信验证码 */
    getMobileSmsCode(type) {
      // 获取短信验证码
      let mobile = this.user.mobile;
      let smsType = !type ? this.smsType : this.smsType + 100;// 若为空则是短信验证码 不为空则是语音验证码
      const param = {mobile, smsType}
      this.getSmsLoading = true;
      toGetSmsCode(param).then(response => {
        this.getSmsLoading = false;
        this.$modal.msgSuccess("短信验证码已发送到您手机，请注意查收");
        // 倒计时处理
        this.showCode = false
        this.counter = this.$smsCounter;
        const timer = setInterval(() => {
          this.counter--;
          if (this.counter <= 0) {
            this.showCode = true
            this.counter = '重新发送';
            this.voiceShow = true;
            clearInterval(timer);
          }
        }, 1000);
      }).catch(() => {
        this.getSmsLoading = false;
      });
    },
    /** 提交短信验证码弹出框 */
    submitForm() {
      this.$refs.form.validate().then(valid => {
        if (valid) {
          this.$modal.loading();
          const param = {
            mobile: this.user.mobile,
            smsType: this.smsType,
            smsCode: this.form.smsCode
          }
          checkSmsCode(param).then(response => {
            uni.hideLoading()
            this.$emit('success', this.smsType, this.form.smsCode);
            this.cancel();
          }).catch(() => {
            uni.hideLoading()
          });
        }

      });
    }
  }
};
</script>
<style scoped lang="scss">

::v-deep .uni-forms-item .is-required {
  display: none;
}

::v-deep .uni-forms-item__label {
  padding: 0;
}

::v-deep .uni-popup-dialog {
  width: 85%;
}

::v-deep .uni-dialog-content {
  padding: 26rpx;
}

.smscode_flex {
  display: flex;
  align-items: center;
  margin-top: 15rpx;
  position: relative;

  .code_btn {
    background: #fff;
    color: $uni-color-primary;
    padding: 0;
    width: 170rpx;
    font-size: 26rpx;
	position: absolute;
	// top: 2rpx;
	right: 10rpx;
	height: 63rpx;
	// line-height: 62rpx;
	line-height: 63rpx;
  }

  .code_graybtn {
    background: #fff;
    color: $uni-color-primary;
    padding: 4rpx 0;
    width: 70rpx;
    font-size: 26rpx;
    position: absolute;
    // top: 2rpx;
    right: 10rpx;
    height: 63rpx;
    // line-height: 62rpx;
    line-height: 63rpx;
  }
}

.sounds-text {
  margin-top: 3px;
  color: $uni-color-primary;
  text-align: right;
  font-size: 13px;
  cursor: pointer;
}

</style>
